<template>
  <div class="travel-application">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>旅行申请</span>
        </div>
      </template>
      
      <!-- 可申请的旅行活动 -->
      <div class="available-activities">
        <h3>可申请的旅行活动</h3>
        <div class="activity-list">
          <el-card class="activity-card" v-for="(activity, index) in activityList" :key="index">
            <div class="activity-info">
              <h4>{{ activity.title }}</h4>
              <div class="activity-meta">
                <span class="activity-time"><el-icon><Clock /></el-icon> {{ activity.activityTime }}</span>
                <span class="activity-location"><el-icon><Location /></el-icon> {{ activity.address }}</span>
                <span class="activity-quota"><el-icon><User /></el-icon> 名额：{{ activity.currentNum }}/{{ activity.totalNum }}</span>
              </div>
              <p class="activity-desc">{{ activity.content }}</p>
              <el-button type="primary" @click="applyFunction(activity)">申请参加</el-button>
            </div>
          </el-card>
        </div>
      </div>
      
      <!-- 我的申请记录 -->
      <div class="my-applications">
            <div class="applications-header">
              <h3>我的申请记录</h3>
              <el-select v-model="statusFilter" placeholder="申请状态" style="width: 150px;" @change="applyRecord">
                <el-option label="全部" value="全部"></el-option>
                <el-option label="待审核" value="0"></el-option>
                <el-option label="已通过" value="1"></el-option>
                <el-option label="已拒绝" value="2"></el-option>
                <el-option label="已取消" value="3"></el-option>
                <el-option label="已结束" value="4"></el-option>
              </el-select>
            </div>
        <el-table :data="myApplications" style="width: 100%">
          <el-table-column prop="title" label="活动名称" width="300"></el-table-column>
          <el-table-column prop="applyTime" label="申请时间"></el-table-column>
          <el-table-column prop="status" label="申请状态">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)">{{ getStatusText(scope.row.status) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="remarks" label="备注"></el-table-column>
          <el-table-column label="操作" width="120" fixed="right">
            <template #default="scope">
              <el-button 
                v-if="scope.row.status === '0'" 
                type="danger" 
                size="small" 
                @click="cancelApplication(scope.row.id)"
              >
                取消申请
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { Clock, Location, User } from '@element-plus/icons-vue'
import { useGlobalStore } from '../store/userInfo'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getFrontActivityList ,getApplyRecordList,applyCancel,applyAdd} from '@/request/activity'

const activityList = ref([])

const getActivityList = () => {
  getFrontActivityList().then(res => {
    activityList.value = res
  }).catch(err => {
    console.log(err)
  })
}
getActivityList();

const store = useGlobalStore()

// 筛选状态
const statusFilter = ref('全部')

// 我的申请记录
const myApplications = ref([])

const applyRecord = () => {
  let status = statusFilter.value
  if(status == '全部'){
    status = ''
  }
  getApplyRecordList(status).then(res => {
    myApplications.value = res
  }).catch(err => {
    console.log(err)
  })
}
applyRecord();

function applyFunction (activity) {
  console.log(activity.id)
  ElMessageBox.confirm('确定申请参加活动吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    applyAdd({
      activityId: activity.id,
      title: activity.title
    }).then(res => {
      ElMessage({ message: '申请已提交', type: 'success' })
      applyRecord()
    }).catch(err => {
      console.log(err)
    })
  }).catch(() => {
    //ElMessage({ message: '已取消申请', type: 'info' })
  })
}



// 取消申请
const cancelApplication = (id) => {
  applyCancel(id).then(res => {
      ElMessage({ message: '申请已取消', type: 'success' })
      applyRecord()
  }).catch(err => {
    console.log(err)
  })
}

// 根据状态获取标签类型
const getStatusType = (status) => {
  switch (status) {
    case '0':
      return 'warning'
    case '1':
      return 'success'
    case '2':
      return 'danger'
    case '3':
      return 'info'
    default:
      return 'info'
  }
}

const getStatusText = (status) => {
  switch (status) {
    case '0':
      return '待审核'
    case '1':
      return '已通过'
    case '2':
      return '已拒绝'
    case '3':
      return '已取消'
    default:
      return '未知状态'
  }
}

</script>

<style scoped>
.travel-application {
  padding: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  /* 申请记录头部样式 */
  .applications-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .applications-header h3 {
    margin: 0;
    font-size: 18px;
    color: #333;
  }

.available-activities,
.my-applications {
  margin-top: 30px;
}

.available-activities h3,
.my-applications h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 18px;
  color: #333;
}

.activity-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.activity-card {
  height: 100%;
}

.activity-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.activity-info h4 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.activity-meta {
  display: flex;
  gap: 20px;
  font-size: 14px;
  color: #666;
}

.activity-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.activity-desc {
  margin: 0;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.activity-info .el-button {
  align-self: flex-start;
  margin-top: 10px;
}
</style>